<template>
    <div class="hello">
        <header-tab msg="排行榜"></header-tab>
        <img :src="rankingImg" alt="" class="img mb45 mt10">
        <div class="topBox sr mb10">
            <div class="bdouBox">
                <img :src="myRecordList.avatar" alt="" class="img1 ">
                <div class="name fz w ta">{{ myRecordList.memberName }}</div>
            </div>
            <div class="fd">
                <div class="w fz18">猜对 {{ myRecordList.guessSuccess }} 次</div>
                <div class="ta">
                    <img :src="bbImg" alt="" class="bbi dl wh">&nbsp;
                    <div class="earnings fz yy dl"> {{ myRecordList.earnings }}</div>
                </div>
            </div>
            <div class="fd">
                <div class="w fz18 ta">{{ myRecordList.guessSuccessPercent }} %</div>
                <div class="yy fz ta">胜率</div>
            </div>
            <div class="fd">
                <div class="w fz18 ta" v-if="myRecordList.mineIndex">{{ myRecordList.mineIndex }}</div>
                <div class="w fz18 ta" v-else>暂无</div>
                <div class="ranKing yy fz">排名</div>
            </div>
        </div>
        <div class="content-box" v-if='topRecordList&&topRecordList.length>0'>
            <div class="box yw p10 sr m0" v-for="(item,index) in topRecordList" :key="item.index">
                <div v-if="index==0">
                    <img class="img-style" src="../assets/img/one.png" alt="">
                </div>
                <div v-else-if="index==1">
                    <img class="img-style" src="../assets/img/two.png" alt="">
                </div>
                <div v-else-if="index==2">
                    <img class="img-style" src="../assets/img/three.png" alt="">
                </div>
                <div v-else class="img-style gray fw fz18"> {{ index + 1 }}</div>
                <div>
                    <img class="img1 dl"  v-lazy="item.avatar"  alt="">
                </div>
                <div class="fd">
                    <div class="nickName gray  ta fz12">{{ item.memberName }}</div>
                    <div>
                        <img class="bbi wh vm dl" :src="bbImg" alt="">&nbsp;&nbsp;
                        <div class="gray dl fz12"> {{ item.earnings }}</div>
                    </div>
                </div>
                <div class="fd">
                    <div class="nickName gray ta fz12">{{ item.guessSuccessPercent }} %</div>
                    <div class="gray ta fz12">胜率</div>
                </div>
                <div class="fd">
                    <div class="gray ta fz12">猜对{{ item.guessSuccess }} 次</div>
                    <div class="gray ta fz12"></div>
                </div>
            </div>
        </div>
        <img class="go-top" v-show="isShow" @click="toTop" src="../assets/img/go-top.png" alt="">
    </div>

</template>

<script>
import HeaderTab from '../components/HeaderTab'
import {topCharts, memberInfo} from '../api/index.js'
import {getAllToken, setAllToken} from '@/utils/auth'
import {Toast} from 'vant';

export default {
    components: {
        HeaderTab,
        [Toast.name]: Toast
    },
    data() {
        return {
            bbImg: 'https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ico/bb.png',
            rankingImg: 'https://cdn.92jiangbei.com/third/bc-guess-up-down-h5/img/ranking.png',
            myRecordList: {
                avatar: 'https://cdn.92jiangbei.com/newjiangbei/img/newImg/member/img-touxiang.png',
                memberName: '奖呗',
                guessSuccess: 0,
                earnings: 0,
                guessSuccessPercent: 0,
                mineIndex: 0
            },
            topRecordList: [
                {avatar:''}

            ],
            memberNo: '',
            name: '奖呗135455664485',
            isShow: false,
            scrolltop: 0,
        }
    },
    mounted() {
        // 此处true需要加上，不加滚动事件可能绑定不成功
        window.addEventListener("scroll", this.handleScroll);
        this.memberNo = this.$store.state.user.memberNo || getAllToken("memberNo")
        this.getTopRecordList()
    },

    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll)
    },

    methods: {
        backPreview() {
            this.$router.go(-1);
        },
        getTopRecordList() {
            let para = {
                "memberNo": this.memberNo,
            }
            topCharts(para).then(res=>{
                if(res.data.code == "000"){
                    let userInfo = res.data.content.mineRecord  //拿到用户信息
                    if( userInfo != null){
                        console.log('ssss')
                        this.myRecordList = userInfo
                        this.myRecordList.avatar = this.myRecordList.avatar?this.myRecordList.avatar:'https://cdn.92jiangbei.com/newjiangbei/img/newImg/member/img-touxiang.png'
                    }else{
                        this.myRecordList.avatar = 'https://cdn.92jiangbei.com/newjiangbei/img/newImg/member/img-touxiang.png'
                }
                    this.topRecordList = res.data.content.topRecordList
                    this.topRecordList.forEach((item,index)=>{
                        item.avatar = item.avatar ? item.avatar :'https://cdn.92jiangbei.com/newjiangbei/img/newImg/member/img-touxiang.png'
                    })
                }

            }).catch(err=>console.log(err))

        },
        handleScroll() {
            const that = this
            // let scrolltop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
            var scrolltop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            that.scrolltop = scrolltop
            // console.log(that.scrolltop)
            if (that.scrolltop && that.scrolltop > 60) {
                that.isShow = true
            } else {
                that.isShow = false
            }

        },
        toTop() {
            let top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            // 实现滚动效果
            const timeTop = setInterval(() => {
                document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
                if (top && top <= 0) {
                    clearInterval(timeTop);
                }
            }, 10);
        },

    }
}
</script>

<style lang="less" scoped>

.hello {
    //position: fixed;
    //top: 0;
    display: flex;
    justify-content: start;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    background-color: rgb(10, 0, 62);
    overflow-y: scroll;
}

.text {
    position: absolute;
    bottom: 30px;
    margin-bottom: 40px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 12px;
}


//头部区域
.topBox {
    width: 99%;
    overflow-x: hidden;
    margin-top: -120px;
    padding: 2.1vw;

    .earnings {
        position: relative;
        top: 4px;
    }

    .ranKing {
        width: 56px;
        text-align: center;
    }
}

.img {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;

}

.name {
    margin-left: -10px;
    width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

//头像
.bdouBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    width: 88px;

    .img1 {
        width: 38px;
        height: 38px;
        border-radius: 32px;
    }

    .name {
        text-align: center;
        font-size: 12px;
        margin-left: 0 !important;
    }

    .bbi {
        width: 15px;
        height: 15px;
    }


}

.content-box {
    height: 100%;
    margin-bottom: 64px;
}

.box {
    width: 95%;
    height: 58px;
    border-radius: 12px;
    background-color: #fff;
    text-align: center;
    margin-bottom: 6px;


    .img-style {
        width: 32px;
        height: 27px;
        line-height: 27px;
        border-radius: 32px;
        margin-right: 10px;
    }

    .img1 {
        width: 43px;
        height: 43px;
        border-radius: 32px;
        margin-right: 10px;
    }

    .nickName {
        width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

}

.fd {
    display: flex;
    height: 100%;
    padding: 2px;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;


}

.go-top {
    position: fixed;
    right: 15px;
    bottom: 100px;
    width: 62px;
    height: 62px;
    z-index: 99;
}

</style>
